<!-- 下单界面，收货地址 or 自提门店的选择组件 -->
<template>
  <view class="allAddress" :style="state.isPickUp ? '' : 'padding-top:10rpx;'">
    <view class="shop-header">
      <view class="shop-info">
        <view class="shop-name">非野集-{{ getShopName() }}</view>
        <view class="distance" v-if="getShopDistance()">
          距离{{ getShopDistance() }}km
        </view>
      </view>
      <view class="delivery-buttons">
        <view class="delivery-button" :class="state.deliveryType === 2 ? 'active' : ''" @tap="switchDeliveryType(2)">自取
        </view>
        <view class="delivery-button" :class="state.deliveryType === 1 ? 'active' : ''" @tap="switchDeliveryType(1)">配送
        </view>
      </view>
    </view>
    <!-- 情况一：收货地址的选择 -->
    <view class="address-info flex flex-wrap ss-row-between" @tap="onSelectAddress"
      v-if="state.deliveryType === 1">
      <view class="addressCon" v-if="state.addressInfo.name">
        <view class="name">收货人：{{ state.addressInfo.name }}（先生）</view>
        <view class="phone">联系电话：{{ state.addressInfo.mobile }}</view>
        <view class="phone">取货地址: {{ state.pickUpInfo }}</view>
      </view>
      <view class="addressCon" v-else>
        <view class="setaddress">设置收货地址</view>
      </view>
      <view class="iconfont">
        <view class="ss-rest-button">
          <text class="_icon-forward" />
        </view>
      </view>
    </view>
    <!-- 情况二：门店的选择 -->
    <view class="address-info flex flex-wrap ss-row-between" v-if="state.deliveryType === 2"
      @tap="onSelectAddress">
      <view class="addressCon" v-if="state.pickUpInfo.name">
        <view class="name">取货人：{{ state.pickUpInfo.name }}（先生）</view>
        <view class="phone">联系电话：{{ state.pickUpInfo.phone }}</view>
        <view class="phone">取货地址: {{ state.pickUpInfo.areaName + state.pickUpInfo.detailAddress }}</view>
      </view>
      <view class="addressCon" v-else>
        <view class="setaddress">选择自提门店</view>
      </view>
      <view class="iconfont">
        <view class="ss-rest-button">
          <text class="_icon-forward" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import sheep from '@/sheep';
import { isEmpty } from 'lodash-es';

const props = defineProps({
  modelValue: {
    type: Object,
    default() { },
  },
});
const emits = defineEmits(['update:modelValue']);

// computed 解决父子组件双向数据同步
const state = computed({
  get() {
    return new Proxy(props.modelValue, {
      set(obj, name, val) {
        emits('update:modelValue', {
          ...obj,
          [name]: val,
        });
        return true;
      },
    });
  },
  set(val) {
    emits('update:modelValue', val);
  },
});

// 选择地址
function onSelectAddress() {
  let emitName = 'SELECT_ADDRESS';
  let addressPage = '/pages/user/address/list?type=select';
  if (state.value.deliveryType === 2) {
    emitName = 'SELECT_PICK_UP_INFO';
    addressPage = '/pages/user/goods_details_store/index';
  }
  uni.$once(emitName, (e) => {
    changeConsignee(e.addressInfo);
  });
  sheep.$router.go(addressPage);
}

// 更改收货人地址&计算订单信息
async function changeConsignee(addressInfo = {}) {
  if (!isEmpty(addressInfo)) {
    if (state.value.deliveryType === 1) {
      state.value.addressInfo = addressInfo;
    }
    if (state.value.deliveryType === 2) {
      state.value.pickUpInfo = addressInfo;
    }
  }
}

// 收货方式切换
const switchDeliveryType = (type) => {
  state.value.deliveryType = type;
};

// 获取店铺名称
const getShopName = () => {
  return '默认门店'; // 配送模式下显示默认门店名称
};

// 获取店铺距离
const getShopDistance = () => {
  return 100; // 配送模式下不显示距离
};
</script>

<style scoped lang="scss">
.allAddress {
  width: 100%;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: rgba($color: #000000, $alpha: 0.2);
  border-radius: 10rpx;
}

.shop-info {
  display: flex;
  flex-direction: column;
}

.shop-name {
  font-size: 28rpx;
  color: #fff;
}

.distance {
  font-size: 12rpx;
  color: #fff;
  font-weight: normal;
  margin-top: 8rpx;
}

.delivery-buttons {
  display: flex;
  background-color: #737373;
}

.delivery-button {
  padding: 10rpx 20rpx;
  color: #FFF;
  border-radius: 22rpx;
  font-size: 26rpx;
}

.delivery-button.active {
  background-color: #000;
  color: #fff;
}

.address-info {
  padding: 20rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  background-color: rgba($color: #FFFFFF, $alpha: 0.4);
}

.address-info .name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.address-info .phone {
  font-size: 28rpx;
  color: #333;
}

.address .iconfont {
  font-size: 35rpx;
  color: #707070;
}

.allAddress .nav {
  width: 100%;
}

.allAddress .nav .item {}

.allAddress .nav .item.on {
  position: relative;
  width: 230rpx;
}

.allAddress .nav .item.on::before {
  position: absolute;
  bottom: 0;
  content: '快递配送';
  font-size: 28rpx;
  display: block;
  height: 0;
  width: 336rpx;
  border-width: 0 20rpx 80rpx 0;
  border-style: none solid solid;
  border-color: transparent transparent #fff;
  z-index: 2;
  border-radius: 14rpx 36rpx 0 0;
  text-align: center;
  line-height: 80rpx;
}

.allAddress .nav .item:nth-of-type(2).on::before {
  content: '到店自提';
  border-width: 0 0 80rpx 20rpx;
  border-radius: 36rpx 14rpx 0 0;
}

.allAddress .nav .item.on2 {
  position: relative;
}

.allAddress .nav .item.on2::before {
  position: absolute;
  bottom: 0;
  content: '到店自提';
  font-size: 28rpx;
  display: block;
  height: 0;
  width: 401rpx;
  border-width: 0 0 60rpx 60rpx;
  border-style: none solid solid;
  border-color: transparent transparent #f7c1bd;
  border-radius: 36rpx 14rpx 0 0;
  text-align: center;
  line-height: 60rpx;
}

.allAddress .nav .item:nth-of-type(1).on2::before {
  content: '快递配送';
  border-width: 0 60rpx 60rpx 0;
  border-radius: 14rpx 36rpx 0 0;
}

.allAddress .address {
  width: 690rpx;
  max-height: 180rpx;
  margin: 0 auto;
}

.allAddress .line {
  width: 100%;
  margin: 0 auto;
}
</style>
